<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/11/9
  Time: 14:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
<%--    引入jQuery--%>
    <script src="js/jquery-3.6.0.min.js"></script>
    <style>
        #box {
            position: absolute;
            left: 100px;
            bottom: 60px;
        }
    </style>
</head>
<body>
    <marquee>弹幕大军来袭..........</marquee>

    <div id="box">
        发送弹幕: <input id="inp" type="text" name="dm" value=""><br>
        <button id="btn">发送</button>
    </div>
</body>
</html>
<script>
    //给上点击事件
    $("#btn").click(function() {
        //获取弹幕
        var dm = $("#inp").val();
        //ajax请求后台
        $.ajax({
            //请求的地址
            url:"demo08Servlet",
            //携带的参数
            data:{"dm":dm},
            //请求的方式
            type:"get",
            //返回的数据类型
            dataType:"text",
            //成功的回调函数
            success:function(obj) {
                //obj代表返回的值
                $("marquee:last").after(obj);


            }
        })

    })

</script>
